<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extra/spring-security">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" type="shortcut icon" th:href="@{/img/favicon.ico}" />
	<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" />
	<link rel="stylesheet" type="text/css" th:href="@{/css/global.css}" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
	<title>郑在守护—无诈校园智防联盟平台</title>
	<style>
		/* 防诈骗内容样式 */
		.anti-fraud-content {
			position: fixed;
			right: 0;

			width: 280px;
			padding: 15px;
			background-color: #fff;
			box-shadow: -2px 0 4px rgba(0,0,0,0.05);
			z-index: 100;
		}
		
		.anti-fraud-banner {
			background: rgb(18, 127, 249);
			color: white;
			padding: 8px;
			margin-bottom: 10px;
			text-align: center;
			border-radius: 4px;
			font-size: 0.9rem;
		}
		
		.anti-fraud-banner h4 {
			font-size: 1rem;
			margin-bottom: 4px;
		}
		
		.anti-fraud-banner p {
			font-size: 0.8rem;
			margin-bottom: 0;
		}
		
		.anti-fraud-tip {
			background-color: #fff3cd;
			border: 1px solid #ffeeba;
			padding: 8px;
			margin-bottom: 10px;
			border-radius: 4px;
			font-size: 0.85rem;
		}
		
		.anti-fraud-tip h5 {
			font-size: 0.9rem;
			margin-bottom: 6px;
		}
		
		.anti-fraud-tip ul {
			padding-left: 16px;
			margin-bottom: 0;
		}
		
		.anti-fraud-tip li {
			font-size: 0.8rem;
			line-height: 1.4;
			margin-bottom: 4px;
		}
		
		.emergency-contact {
			background-color: #dc3545;
			color: white;
			padding: 8px;
			border-radius: 4px;
			text-align: center;
			font-size: 0.85rem;
		}
		
		.emergency-contact h5 {
			font-size: 0.9rem;
			margin-bottom: 4px;
		}
		
		/* 主内容区域调整 */
		.main-content {
			margin-right: 300px; /* 为防诈骗侧边栏留出空间 */
			margin-left: 80px; /* 为左侧二维码留出空间 */
		}
		
		/* 两侧二维码样式 */
		.side-qrcode {
			position: fixed;
			top: 50%;
			transform: translateY(-50%);
			width: 100px;
			background: rgba(255, 255, 255, 0.9);
			padding: 15px;
			border-radius: 8px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
			z-index: 100;
		}
		
		.side-qrcode.left {
			left: 20px;
		}
		
		.side-qrcode.right {
			right: 20px;
		}
		
		.side-qrcode img {
			width: 100%;
			height: auto;
			margin-bottom: 8px;
		}
		
		.side-qrcode p {
			font-size: 0.8rem;
			color: #666;
			margin: 0;
			text-align: center;
		}
		
		/* 页脚样式优化 */
		footer.bg-dark {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 60px;
			background-color: rgb(149,117,244) !important;
			padding: 10px 0;
			z-index: 1000;
		}
		
		.qrcode-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		
		.qrcode-container img {
			width: 50px !important;
			height: 50px !important;
			margin-bottom: 2px;
		}
		
		.qrcode-container p {
			margin: 0;
			font-size: 0.7rem;
			color: rgba(255, 255, 255, 0.8);
		}
		
		.company-info {
			font-size: 0.8rem;
			margin: 0;
			padding: 0;
		}
		
		.company-info li {
			margin-bottom: 2px;
			color: rgba(255, 255, 255, 0.8) !important;
		}
		
		/* 主内容区域调整，为固定定位的页脚留出空间 */
		.main {
			padding-bottom: calc(16.67vh + 20px);
		}
		
		/* 防止内容被页脚遮挡 */
		.nk-container {
			min-height: 100vh;
			position: relative;
			padding-bottom: 16.67vh;
		}
		
		/* 修改导航栏样式 */
		.navbar {
			background-color: white !important;
			box-shadow: 0 1px 3px rgba(0,0,0,0.1);
			height: 56px;
			padding: 0;
			border-radius: 4px;
			margin-top: 5px;
		}
		
		.navbar-brand {
			display: flex;
			align-items: center;
			padding: 0 16px;
			height: 56px;
			border-right: 1px solid #f0f0f0;
			font-weight: 600;
			color: #2196F3;
			transition: all 0.3s ease;
		}
		
		.navbar-brand:hover {
			background-color: rgba(33, 150, 243, 0.05);
		}
		
		.navbar-brand i {
			color: #2196F3;
			font-size: 20px;
			margin-right: 8px;
		}
		
		.navbar-brand span {
			color: #2196F3;
			font-size: 16px;
			font-weight: 600;
		}
		
		.navbar-nav {
			display: flex;
			align-items: center;
			height: 56px;
			padding: 0 12px;
		}
		
		.nav-item {
			height: 56px;
			margin: 0 2px;
		}
		
		.nav-link {
			display: flex !important;
			align-items: center;
			height: 56px;
			padding: 0 12px !important;
			color: #666 !important;
			position: relative;
			font-size: 13px;
			transition: all 0.3s ease;
		}
		
		.nav-link i {
			font-size: 16px;
			margin-right: 5px;
			transition: transform 0.2s ease;
			display: inline-block;
			vertical-align: middle;
		}
		
		.nav-link span {
			display: inline-block;
			vertical-align: middle;
		}
		
		.nav-link:hover {
			color: #2196F3 !important;
			background-color: rgba(33, 150, 243, 0.05);
		}
		
		.nav-link:hover i {
			transform: scale(1.1);
		}
		
		.nav-link.active {
			color: #2196F3 !important;
			font-weight: 500;
		}
		
		.nav-link.active:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 16px;
			right: 16px;
			height: 2px;
			background-color: #2196F3;
		}
		
		.badge-danger {
			position: absolute;
			top: 10px;
			right: 4px;
			padding: 0.2em 0.4em;
			font-size: 11px;
			border-radius: 8px;
		}
		
		.search-form {
			position: relative;
			margin-right: 12px;
		}
		
		.search-form input {
			width: 200px;
			height: 32px;
			padding: 0 32px 0 12px;
			border: 1px solid #e8e8e8;
			border-radius: 16px;
			background-color: #f5f5f5;
			font-size: 13px;
			transition: all 0.3s ease;
		}
		
		.search-form input:focus {
			width: 240px;
			border-color: #2196F3;
			box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
			outline: none;
		}
		
		.search-form .serach-btn {
			position: absolute;
			right: 4px;
			top: 4px;
			width: 24px;
			height: 24px;
			font-size: 14px;
			background-color: transparent;
			border: none;
			color: #2196F3;
			cursor: pointer;
			transition: all 0.2s ease;
		}
		
		.search-form .serach-btn:hover {
			transform: scale(1.1);
			color: #1976D2;
		}
		
		.user-info {
			height: 56px;
			border-left: 1px solid #f0f0f0;
			padding-left: 16px;
			transition: all 0.3s ease;
		}
		
		.user-info:hover {
			background-color: rgba(33, 150, 243, 0.05);
		}
		
		.user-avatar {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			margin-right: 6px;
			border: 2px solid rgba(33, 150, 243, 0.2);
			transition: all 0.3s ease;
		}
		
		.user-info:hover .user-avatar {
			border-color: rgba(33, 150, 243, 0.5);
		}
		
		.dropdown-menu {
			margin-top: 0;
			border: none;
			box-shadow: 0 3px 12px rgba(0,0,0,0.15);
			border-radius: 8px;
			min-width: 150px;
			padding: 8px 0;
			animation: fadeIn 0.2s ease;
		}
		
		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(-10px); }
			to { opacity: 1; transform: translateY(0); }
		}
		
		.dropdown-item {
			padding: 8px 16px;
			display: flex;
			align-items: center;
			color: #666;
			font-size: 13px;
			transition: all 0.2s ease;
		}
		
		.dropdown-item i {
			font-size: 15px;
			margin-right: 8px;
			color: #999;
			transition: all 0.2s ease;
		}
		
		.dropdown-item:hover {
			color: #2196F3;
			background-color: rgba(33, 150, 243, 0.05);
		}
		
		.dropdown-item:hover i {
			color: #2196F3;
			transform: scale(1.1);
		}
		
		.dropdown-divider {
			margin: 6px 0;
			border-top-color: #f0f0f0;
		}
		
		/* 新增导航栏样式 */
		.nav-item-group {
			display: flex;
			align-items: center;
			height: 56px;
			border-left: 1px solid #f0f0f0;
			padding-left: 10px;
		}
		
		.nav-item-group .nav-link {
			margin: 0 5px;
			padding: 5px 12px;
			border-radius: 4px;
			transition: all 0.3s ease;
		}
		
		.nav-item-group .nav-link:first-child {
			background-color: rgba(33, 150, 243, 0.1);
		}
		
		.nav-item-group .nav-link:last-child {
			background-color: rgba(76, 175, 80, 0.1);
		}
		
		.nav-item-group .nav-link:hover {
			transform: translateY(-2px);
			box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		}

		/* 修改通知徽章样式，使其成为红色圆圈白色数字 */
        .badge-danger {
            position: absolute;
            top: -5px;
            right: -5px;
            padding: 0.25rem 0.4rem;
            font-size: 0.75rem;
            font-weight: 700;
            color: #fff;
            background-color: #ff4d4f;
            border-radius: 50%;
            min-width: 18px;
            height: 18px;
            line-height: 1;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 0 1px #fff;
        }
	</style>
</head>
<body>
	<div class="nk-container">
		<!-- 防诈骗横幅 -->
		<div class="anti-fraud-banner">
			<div class="container">
				<h4><i class="bi bi-shield-check"></i> 提高警惕，防范诈骗</h4>
				<p class="mb-0">共建平安校园，远离电信诈骗</p>
			</div>
		</div>
		<!-- 头部 -->
		<header class="bg-white sticky-top" th:fragment="header">
            <div class="container">
                <!-- 导航 -->
                <nav class="navbar navbar-expand-lg">
                    <!-- logo -->
                    <a class="navbar-brand" th:href="@{/index}">
                        <i class="bi bi-shield-check"></i>
                        <span>防诈中心</span>
                    </a>
                    
                    <!-- 功能 -->
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <!-- 主导航 -->
                        <ul class="navbar-nav mr-auto d-flex flex-row">
                            <li class="nav-item">
                                <a class="nav-link active" th:href="@{/index}">
                                    <i class="bi bi-house" style="color: #4CAF50;"></i>首页
                                </a>
                            </li>
                            <li class="nav-item" th:if="${loginUser != null}">
                                <a class="nav-link position-relative" th:href="@{/letter/list}">
                                    <i class="bi bi-envelope" style="color: #9C27B0;"></i>消息
                                    <span class="badge badge-danger" th:if="${allUnreadCount!=0}" th:text="${allUnreadCount}"></span>
                                </a>
                            </li>
							<li class="nav-item" th:if="${loginUser != null}">
								<a class="nav-link" th:href="@{/discuss/publish}">
									<i class="bi bi-plus-square" style="color: #F44336;"></i><span>发布</span>
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" th:href="@{/fraud/list}">
									<i class="bi bi-shield-exclamation" style="color: #FF9800;"></i><span>诈骗案例</span>
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="https://www.12315.cn/">
									<i class="bi bi-telephone" style="color: #E91E63;"></i><span>12315投诉</span>
								</a>
							</li>
						</ul>
						
						<!-- 搜索框 -->
						<form class="form-inline search-form" method="get" th:action="@{/search}">
							<input class="form-control" type="search" name="keyword" th:value="${keyword}" placeholder="搜索防诈内容..." aria-label="Search">
							<button class="btn serach-btn" type="submit">
								<i class="bi bi-search"></i>
							</button>
						</form>
						
						<!-- 用户信息 -->
						<div class="user-info" th:if="${loginUser != null}">
							<div class="dropdown">
								<a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<img th:src="${loginUser.headerUrl}" class="user-avatar">
									<span th:text="${loginUser.username}"></span>
								</a>
								<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
									<a class="dropdown-item" th:href="@{|/user/profile/${loginUser.id}|}">
										<i class="bi bi-person" style="color: #2196F3;"></i>个人主页
									</a>
									<a class="dropdown-item" th:href="@{/user/setting}">
										<i class="bi bi-gear" style="color: #607D8B;"></i>账号设置
									</a>
									<a class="dropdown-item" th:href="@{/data}" sec:authorize="hasAnyAuthority('admin')">
										<i class="bi bi-clipboard-data" style="color: #3F51B5;"></i>数据统计
									</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" th:href="@{/logout}">
										<i class="bi bi-box-arrow-right" style="color: #F44336;"></i>退出登录
									</a>
								</div>
							</div>
						</div>
						
						<!-- 未登录状态 -->
						<div class="nav-item-group" th:if="${loginUser == null}">
							<a class="nav-link" th:href="@{/register}" style="color: #2196F3;">注册</a>
							<a class="nav-link" th:href="@{/login}" style="color: #4CAF50;">登录</a>
						</div>
					</div>
				</nav>
			</div>
		</header>

		<!-- 主要内容区域 -->
		<div class="main">
			<!-- 左侧二维码 -->
			<div class="side-qrcode left">
				<img src="/images/fanzhaapp.png" alt="反诈APP">
				<p>反诈APP</p>
			</div>
			
			<!-- 右侧二维码
			<div class="side-qrcode right">
				<img src="/images/douyin.png" alt="抖音号">
				<p>抖音号</p>
			</div>-->
			
			<div class="container">
				<div class="row">
					<!-- 帖子列表区域 -->
					<div class="col-md-9 main-content">
						<div class="position-relative">
							<!-- 筛选条件 -->
							<ul class="nav nav-tabs mb-3">
								<li class="nav-item">
									<a th:class="|nav-link ${orderMode==2 ? 'active' : ''}|" th:href="@{/index(orderMode=2)}"><i class="bi bi-star"></i> 推荐</a>
								</li>
								<li class="nav-item">
									<a th:class="|nav-link ${orderMode==0 ? 'active' : ''}|" th:href="@{/index(orderMode=0)}"><i class="bi bi-lightning"></i> 最新</a>
								</li>
								<li class="nav-item">
									<a th:class="|nav-link ${orderMode==1 ? 'active' : ''}|" th:href="@{/index(orderMode=1)}"><i class="bi bi-hand-thumbs-up"></i> 最热</a>
								</li>
							</ul>
						
							<a th:href="@{/discuss/publish}" th:if="${loginUser != null}">
								<button type="button" class="btn btn-primary btn-sm position-absolute rt-0">
									<i class="bi bi-plus-square"></i> 发布防诈骗宣传
								</button>
							</a>
						</div>
						<!-- 提示框 -->
						<div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-lg" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="hintModalLabel">提示</h5>
									</div>
									<div class="modal-body" id="hintBody"></div>
								</div>
							</div>
						</div>

						<!-- 帖子列表 -->
						<ul class="list-unstyled">
							<li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${discussPosts}">
								<div class="media-body">
									<h6 class="mt-0 mb-3">
										<a th:href="@{|/discuss/detail/${map.post.id}|}" th:utext="${map.post.title}"></a>
										<span class="badge badge-secondary bg-danger" th:if="${map.post.type==1}"
										   style="font-weight: 500; color: #f85959; background-color: rgba(248,89,89,0.1) !important;">顶</span>
										<span class="badge badge-secondary bg-primary" th:if="${map.post.status==1}"
										   style="font-weight: 500; color: #3c8cff; background-color: rgba(60,140,255,0.1) !important;">精</span>
									</h6>
									<div class="text-muted font-size-12">
										<u class="mr-3" th:utext="${map.user.username}"></u> 发布于 <b th:text="${#dates.format(map.post.createTime,'yyyy-MM-dd HH:mm:ss')}"></b>
										<ul class="d-inline float-right">
											<li class="d-inline ml-2">赞 <span th:text="${map.likeCount}"></span></li>
											<li class="d-inline ml-2">|</li>
											<li class="d-inline ml-2">回帖 <span th:text="${map.post.commentCount}"></span></li>
											<li class="d-inline ml-2" th:if="${loginUser != null && loginUser.id == map.user.id}">|</li>
											<li class="d-inline ml-2" th:if="${loginUser != null && loginUser.id == map.user.id}">
												<a th:href="@{|/discuss/edit/${map.post.id}|}" class="text-primary">编辑</a>
											</li>
										</ul>
									</div>
								</div>
							</li>
						</ul>
						<!--分页 -->
						<nav class="mt-5" th:if = "${page.rows>0}" th:fragment="pagination">
							<ul class="pagination justify-content-center">
								<li class="page-item">
									<a class="page-link" th:href="@{${page.path}(current=1)}">首页</a>
								</li>
								<li th:class="|page-item ${page.current==1?'disabled':''}|">
									<a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一页</a>
								</li>
								<!--numbers.sequence 生成一个 page.from 到 page.to 的连续整数数组-->
								<li th:each="i:${#numbers.sequence(page.from,page.to)}" th:class="|page-item ${i==page.current? 'active' : ''}|" >
									<a class="page-link" th:href="@{${page.path}(current=${i})}" th:text="${i}"></a>
								</li>
								<li th:class="|page-item ${page.current==page.total ? 'disabled':''}|">
									<a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一页</a>
								</li>
								<li class="page-item">
									<a class="page-link" th:href="@{${page.path}(current=${page.total})}">末页</a>
								</li>
							</ul>
						</nav>
					</div>

<!--					&lt;!&ndash; 防诈骗内容侧边栏 &ndash;&gt;-->
<!--					<div class="col-md-3">-->
<!--						<div class="anti-fraud-content">-->
<!--							&lt;!&ndash; 防诈骗横幅 &ndash;&gt;-->
<!--							<div class="anti-fraud-banner">-->
<!--								<h4><i class="bi bi-shield-check"></i> 提高警惕，防范诈骗</h4>-->
<!--								<p>共建平安校园，远离电信诈骗</p>-->
<!--							</div>-->
<!--							-->
<!--							&lt;!&ndash; 防诈骗提示 &ndash;&gt;-->
<!--							<div class="anti-fraud-tip">-->
<!--								<h5><i class="bi bi-exclamation-triangle"></i> 防诈骗小贴士</h5>-->
<!--								<ul>-->
<!--									<li>不轻信陌生来电，不点击不明链接</li>-->
<!--									<li>不向陌生人转账，不透露个人信息</li>-->
<!--									<li>遇到可疑情况及时报警</li>-->
<!--									<li>下载国家反诈中心APP，提高防范意识</li>-->
<!--								</ul>-->
<!--							</div>-->
<!--							-->
<!--							&lt;!&ndash; 紧急联系方式 &ndash;&gt;-->
<!--							<div class="emergency-contact">-->
<!--								<h5><i class="bi bi-telephone"></i> 紧急求助</h5>-->
<!--								<p class="mb-0">如遇诈骗，请立即拨打：<strong>12315</strong></p>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
				</div>
			</div>
		</div>

		<!-- 尾部 -->
		<footer class="footer fixed-bottom" style="background-color: rgba(52, 58, 64, 0.95); height: 60px; padding: 10px 0;">
			<div class="container h-100">
				<div class="row h-100 align-items-center" style="margin: 0;">
					<div class="col-12">
						<div class="d-flex align-items-center justify-content-center h-100">
							<div class="text-white-50" style="font-size: 12px; line-height: 1.6;">
								<span style="margin-right: 15px;">郑在守护——无诈校园智防联盟平台</span>
								<span>制作人：海航源、黄文博、邓皓轩、王胜超</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</footer>
	</div>

	<script th:src="@{/js/jquery-3.1.0.min.js}"></script>
	<script th:src="@{/js/popper.min.js}"></script>
	<script th:src="@{/js/bootstrap.min.js}"></script>
	<script th:src="@{/js/global.js}"></script>
	<script th:src="@{/js/index.js}"></script>
</body>
</html>

<style>
	/* 防诈骗内容样式 */
	.anti-fraud-content {
		position: fixed;
		right: 0;

		width: 280px;
		padding: 15px;
		background-color: #fff;
		box-shadow: -2px 0 4px rgba(0,0,0,0.05);
		z-index: 100;
	}
	
	.anti-fraud-banner {
		background: rgb(18, 127, 249);
		color: white;
		padding: 8px;
		margin-bottom: 10px;
		text-align: center;
		border-radius: 4px;
		font-size: 0.9rem;
	}
	
	.anti-fraud-banner h4 {
		font-size: 1rem;
		margin-bottom: 4px;
	}
	
	.anti-fraud-banner p {
		font-size: 0.8rem;
		margin-bottom: 0;
	}
	
	.anti-fraud-tip {
		background-color: #fff3cd;
		border: 1px solid #ffeeba;
		padding: 8px;
		margin-bottom: 10px;
		border-radius: 4px;
		font-size: 0.85rem;
	}
	
	.anti-fraud-tip h5 {
		font-size: 0.9rem;
		margin-bottom: 6px;
	}
	
	.anti-fraud-tip ul {
		padding-left: 16px;
		margin-bottom: 0;
	}
	
	.anti-fraud-tip li {
		font-size: 0.8rem;
		line-height: 1.4;
		margin-bottom: 4px;
	}
	
	.emergency-contact {
		background-color: #dc3545;
		color: white;
		padding: 8px;
		border-radius: 4px;
		text-align: center;
		font-size: 0.85rem;
	}
	
	.emergency-contact h5 {
		font-size: 0.9rem;
		margin-bottom: 4px;
	}
	
	/* 主内容区域调整 */
	.main-content {
		margin-right: 300px; /* 为防诈骗侧边栏留出空间 */
		margin-left: 80px; /* 为左侧二维码留出空间 */
	}
	
	/* 两侧二维码样式 */
	.side-qrcode {
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		width: 100px;
		background: rgba(255, 255, 255, 0.9);
		padding: 15px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		z-index: 100;
	}
	
	.side-qrcode.left {
		left: 20px;
	}
	
	.side-qrcode.right {
		right: 20px;
	}
	
	.side-qrcode img {
		width: 100%;
		height: auto;
		margin-bottom: 8px;
	}
	
	.side-qrcode p {
		font-size: 0.8rem;
		color: #666;
		margin: 0;
		text-align: center;
	}
	
	/* 页脚样式优化 */
	footer.bg-dark {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background-color: rgb(149,117,244) !important;
		padding: 10px 0;
		z-index: 1000;
	}
	
	.qrcode-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.qrcode-container img {
		width: 50px !important;
		height: 50px !important;
		margin-bottom: 2px;
	}
	
	.qrcode-container p {
		margin: 0;
		font-size: 0.7rem;
		color: rgba(255, 255, 255, 0.8);
	}
	
	.company-info {
		font-size: 0.8rem;
		margin: 0;
		padding: 0;
	}
	
	.company-info li {
		margin-bottom: 2px;
		color: rgba(255, 255, 255, 0.8) !important;
	}
	
	/* 主内容区域调整，为固定定位的页脚留出空间 */
	.main {
		padding-bottom: calc(16.67vh + 20px);
	}
	
	/* 防止内容被页脚遮挡 */
	.nk-container {
		min-height: 100vh;
		position: relative;
		padding-bottom: 16.67vh;
	}
	
	/* 修改导航栏样式 */
	.navbar {
		background-color: white !important;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
		height: 56px;
		padding: 0;
		border-radius: 4px;
		margin-top: 5px;
	}
	
	.navbar-brand {
		display: flex;
		align-items: center;
		padding: 0 16px;
		height: 56px;
		border-right: 1px solid #f0f0f0;
		font-weight: 600;
		color: #2196F3;
		transition: all 0.3s ease;
	}
	
	.navbar-brand:hover {
		background-color: rgba(33, 150, 243, 0.05);
	}
	
	.navbar-brand i {
		color: #2196F3;
		font-size: 20px;
		margin-right: 8px;
	}
	
	.navbar-brand span {
		color: #2196F3;
		font-size: 16px;
		font-weight: 600;
	}
	
	.navbar-nav {
		display: flex;
		align-items: center;
		height: 56px;
		padding: 0 12px;
	}
	
	.nav-item {
		height: 56px;
		margin: 0 2px;
	}
	
	.nav-link {
		display: flex !important;
		align-items: center;
		height: 56px;
		padding: 0 12px !important;
		color: #666 !important;
		position: relative;
		font-size: 13px;
		transition: all 0.3s ease;
	}
	
	.nav-link i {
		font-size: 16px;
		margin-right: 5px;
		transition: transform 0.2s ease;
		display: inline-block;
		vertical-align: middle;
	}
	
	.nav-link span {
		display: inline-block;
		vertical-align: middle;
	}
	
	.nav-link:hover {
		color: #2196F3 !important;
		background-color: rgba(33, 150, 243, 0.05);
	}
	
	.nav-link:hover i {
		transform: scale(1.1);
	}
	
	.nav-link.active {
		color: #2196F3 !important;
		font-weight: 500;
	}
	
	.nav-link.active:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 16px;
		right: 16px;
		height: 2px;
		background-color: #2196F3;
	}
	
	.badge-danger {
		position: absolute;
		top: 10px;
		right: 4px;
		padding: 0.2em 0.4em;
		font-size: 11px;
		border-radius: 8px;
	}
	
	.search-form {
		position: relative;
		margin-right: 12px;
	}
	
	.search-form input {
		width: 200px;
		height: 32px;
		padding: 0 32px 0 12px;
		border: 1px solid #e8e8e8;
		border-radius: 16px;
		background-color: #f5f5f5;
		font-size: 13px;
		transition: all 0.3s ease;
	}
	
	.search-form input:focus {
		width: 240px;
		border-color: #2196F3;
		box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
		outline: none;
	}
	
	.search-form .serach-btn {
		position: absolute;
		right: 4px;
		top: 4px;
		width: 24px;
		height: 24px;
		font-size: 14px;
		background-color: transparent;
		border: none;
		color: #2196F3;
		cursor: pointer;
		transition: all 0.2s ease;
	}
	
	.search-form .serach-btn:hover {
		transform: scale(1.1);
		color: #1976D2;
	}
	
	.user-info {
		height: 56px;
		border-left: 1px solid #f0f0f0;
		padding-left: 16px;
		transition: all 0.3s ease;
	}
	
	.user-info:hover {
		background-color: rgba(33, 150, 243, 0.05);
	}
	
	.user-avatar {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		margin-right: 6px;
		border: 2px solid rgba(33, 150, 243, 0.2);
		transition: all 0.3s ease;
	}
	
	.user-info:hover .user-avatar {
		border-color: rgba(33, 150, 243, 0.5);
	}
	
	.dropdown-menu {
		margin-top: 0;
		border: none;
		box-shadow: 0 3px 12px rgba(0,0,0,0.15);
		border-radius: 8px;
		min-width: 150px;
		padding: 8px 0;
		animation: fadeIn 0.2s ease;
	}
	
	@keyframes fadeIn {
		from { opacity: 0; transform: translateY(-10px); }
		to { opacity: 1; transform: translateY(0); }
	}
	
	.dropdown-item {
		padding: 8px 16px;
		display: flex;
		align-items: center;
		color: #666;
		font-size: 13px;
		transition: all 0.2s ease;
	}
	
	.dropdown-item i {
		font-size: 15px;
		margin-right: 8px;
		color: #999;
		transition: all 0.2s ease;
	}
	
	.dropdown-item:hover {
		color: #2196F3;
		background-color: rgba(33, 150, 243, 0.05);
	}
	
	.dropdown-item:hover i {
		color: #2196F3;
		transform: scale(1.1);
	}
	
	.dropdown-divider {
		margin: 6px 0;
		border-top-color: #f0f0f0;
	}
	
	/* 新增导航栏样式 */
	.nav-item-group {
		display: flex;
		align-items: center;
		height: 56px;
		border-left: 1px solid #f0f0f0;
		padding-left: 10px;
	}
	
	.nav-item-group .nav-link {
		margin: 0 5px;
		padding: 5px 12px;
		border-radius: 4px;
		transition: all 0.3s ease;
	}
	
	.nav-item-group .nav-link:first-child {
		background-color: rgba(33, 150, 243, 0.1);
	}
	
	.nav-item-group .nav-link:last-child {
		background-color: rgba(76, 175, 80, 0.1);
	}
	
	.nav-item-group .nav-link:hover {
		transform: translateY(-2px);
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}
	
	/* 修改导航栏样式，确保水平显示 */
	.navbar-nav.mr-auto {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none; /* Firefox */
	}
	
	.navbar-nav.mr-auto::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Edge */
	}
	
	.nav-item {
		height: 56px;
		margin: 0 2px;
		white-space: nowrap;
	}
	
	.nav-link {
		padding: 0 8px !important; /* 减小内边距使项目更紧凑 */
	}
	
	.nav-link:hover {
		color: #2196F3 !important;
		background-color: rgba(33, 150, 243, 0.05);
	}
	
	.nav-link:hover i {
		transform: scale(1.1);
	}
	
	.nav-link.active {
		color: #2196F3 !important;
		font-weight: 500;
	}
	
	.nav-link.active:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 16px;
		right: 16px;
		height: 2px;
		background-color: #2196F3;
	}
	
	.badge-danger {
		position: absolute;
		top: 10px;
		right: 4px;
		padding: 0.2em 0.4em;
		font-size: 11px;
		border-radius: 8px;
	}
	
	.search-form {
		position: relative;
		margin-right: 12px;
	}
	
	.search-form input {
		width: 200px;
		height: 32px;
		padding: 0 32px 0 12px;
		border: 1px solid #e8e8e8;
		border-radius: 16px;
		background-color: #f5f5f5;
		font-size: 13px;
		transition: all 0.3s ease;
	}
	
	.search-form input:focus {
		width: 240px;
		border-color: #2196F3;
		box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
		outline: none;
	}
	
	.search-form .serach-btn {
		position: absolute;
		right: 4px;
		top: 4px;
		width: 24px;
		height: 24px;
		font-size: 14px;
		background-color: transparent;
		border: none;
		color: #2196F3;
		cursor: pointer;
		transition: all 0.2s ease;
	}
	
	.search-form .serach-btn:hover {
		transform: scale(1.1);
		color: #1976D2;
	}
	
	.user-info {
		height: 56px;
		border-left: 1px solid #f0f0f0;
		padding-left: 16px;
		transition: all 0.3s ease;
	}
	
	.user-info:hover {
		background-color: rgba(33, 150, 243, 0.05);
	}
	
	.user-avatar {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		margin-right: 6px;
		border: 2px solid rgba(33, 150, 243, 0.2);
		transition: all 0.3s ease;
	}
	
	.user-info:hover .user-avatar {
		border-color: rgba(33, 150, 243, 0.5);
	}
	
	.dropdown-menu {
		margin-top: 0;
		border: none;
		box-shadow: 0 3px 12px rgba(0,0,0,0.15);
		border-radius: 8px;
		min-width: 150px;
		padding: 8px 0;
		animation: fadeIn 0.2s ease;
	}
	
	@keyframes fadeIn {
		from { opacity: 0; transform: translateY(-10px); }
		to { opacity: 1; transform: translateY(0); }
	}
	
	.dropdown-item {
		padding: 8px 16px;
		display: flex;
		align-items: center;
		color: #666;
		font-size: 13px;
		transition: all 0.2s ease;
	}
	
	.dropdown-item i {
		font-size: 15px;
		margin-right: 8px;
		color: #999;
		transition: all 0.2s ease;
	}
	
	.dropdown-item:hover {
		color: #2196F3;
		background-color: rgba(33, 150, 243, 0.05);
	}
	
	.dropdown-item:hover i {
		color: #2196F3;
		transform: scale(1.1);
	}
	
	.dropdown-divider {
		margin: 6px 0;
		border-top-color: #f0f0f0;
	}
